import React, { useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { PlusOutlined,DeleteOutlined ,EditOutlined,UndoOutlined} from '@ant-design/icons';
import { Button , Switch, message,Popconfirm ,Image,Tooltip } from 'antd';
import {getUserDataList,deleteUserData,isRecommend} from '@/services/user';
import CreateOrEdit from "./components/CreateOrEdit";
import EditPassword from "@/pages/User/components/EditPassword";

const Index = () => {

  // ref执行刷新数据
  const actionRef = useRef();

  // 添加 模态框是否显示 状态
  const [isModalVisible,setIsModalVisible] = useState(false);

  // 密码模态框状态设置
  const [isPwModalVisible,setIsPwModalVisible] =useState(false);

  // 获取编辑用户的id
  const [uid,setuid] = useState(undefined);

  // 是否显示模态框
  const isShowModal = (show,uid = undefined) => {
    setIsModalVisible(show)
    setuid(uid)
  }

  // 是否显示修改密码模态框
  const isShowUpdatePwModal = (show,uid = undefined) => {
    setIsPwModalVisible(show)
    setuid(uid)
  }

  // 查询 获取用户数据列表
  const getUserData = async (params) => {
    const res = await getUserDataList(params)
    return {
      data: res.data,
      success:true,
      total: res.meta.pagination.total,
    }
  }

  // 改变 用户推荐状态
  const switchUser = async (id) => {
    const changeSwitch = await isRecommend(id);
    if (changeSwitch.status === undefined) {
      message.success('改变状态成功')
    }
  }

  // 删除
  const isDelete = async (id) => {
    const response = await deleteUserData(id);
    if (response.status === undefined) {
      message.success('删除成功')
      actionRef.current.reload()
    }else {
      message.error('删除失败')
    }
  }

  // 表格字段
  const columns = [
    {
      title: '头像',
      dataIndex: 'portrait',
      hideInSearch: true,
      render:(_,record) =>  (
        <Image
          width={50}
          size={64}
          src={record.portrait}
          placeholder={
            <Image
              preview={false}
              src={record.portrait}
              width={200}
            />
          }
        />
      )
    },
    {
      title: '用户名',
      dataIndex: 'username'
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      hideInSearch: true,
    },
    {
      title: '启用状态',
      dataIndex: 'is_recommend',
      hideInSearch: true,
      render: (_,record) => {
        return  <Switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          onChange={() => { switchUser(record.id)} }
          defaultChecked={record.status == 0 ? false:true} />
      }
    },
    {
      title: '最后登录时间',
      dataIndex: 'ltime',
      hideInSearch: true,
    },
    {
      title: '编辑',
      render: (_,record) => {
        return <div>
          <Tooltip title="编辑">
            <Button
              type="primary"
              shape="circle"
              onClick={() => isShowModal(true,record.id)}
              icon={<EditOutlined />}
            />&nbsp;&nbsp;
          </Tooltip>
          <Tooltip title="修改密码">
            <Button
              type="primary"
              shape="circle"
              onClick={() => isShowUpdatePwModal(true,record.id)}
              icon={<UndoOutlined />}
            />
          </Tooltip>&nbsp;&nbsp;
          {
            record.id !== 1 ?
              <Popconfirm
                title="你确定要删除吗？"
                onConfirm={()=>{isDelete(record.id)}}
                okText='确认'
              >
                <Tooltip title="删除">
                  <Button
                    type="danger"
                    shape="circle"
                    icon={<DeleteOutlined />}
                  />
                </Tooltip>
              </Popconfirm> : <div>&nbsp;&nbsp;</div>
          }
        </div>
      }
    }
  ]

  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        columns={columns}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize:5
        }}
        hideOnSinglePage={true}
        request={ async (params= {}) => getUserData(params) }
        dateFormatter="string"
        headerTitle="用户列表"
        toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          type="primary" onClick={() => isShowModal(true)}
        >
          新建
        </Button>,
      ]}
        />
      {
        isModalVisible ?  <CreateOrEdit
          isModalVisible={isModalVisible}
          uid={uid}
          isShowModal={isShowModal}
          actionRef={actionRef}
        /> : ''
      }
      {
        isPwModalVisible ? <EditPassword
          isShowUpdatePwModal={isShowUpdatePwModal}
          isPwModalVisible={isPwModalVisible}
          uid={uid}
          actionRef={actionRef}
        /> : ''
      }
    </PageContainer>
  );
};

export default Index;
